<template>
  <view class="cell" :style="{ height: props.cellHeight + 'rpx' }">
    <image class="icon" src="/pages/appliance/static/HVN/ic_hvn_skill_control.png" v-if="skillCatelog == 0"></image>
    <image class="icon" src="/pages/appliance/static/HVN/ic_hvn_skill_knowledge.png" v-if="skillCatelog == 1"></image>
    <image class="icon" src="/pages/appliance/static/HVN/ic_hvn_skill_guide.png" v-if="skillCatelog == 2"></image>
    <image
      class="icon"
      src="/pages/appliance/static/HVN/ic_hvn_function_declaration.png"
      v-if="skillCatelog == 3"
    ></image>
    <view class="content">
      <view class="title">“{{ props.title }}”</view>
      <view class="des">{{ props.desc }}</view>
    </view>
    <view v-if="props.showButton" class="right-button" @click="changeAnother">换一换</view>
  </view>
</template>

<script setup lang="ts">
import { refreshskillListLight } from '@/api/hvn'
import { showLoading } from '@/utils/mpHelper'
import type { SkillModel } from '@/api/hvn'

const props = defineProps<{
  cellHeight: number
  title?: string
  desc?: string
  showButton: boolean
  id: number
  skillCatelog: number
  index: number
}>()
type params = {
  model: SkillModel
  index: number
}
const emit = defineEmits<{
  (e: 'refresh:model', model: params): void
}>()
const showImage = ref('')

const height = computed(() => {
  return props.cellHeight.toString() + 'rpx'
})

async function changeAnother() {
  try {
    await showLoading(async () => {
      let res = await refreshskillListLight(props.skillCatelog)
      emit('refresh:model', { model: res.data, index: props.index })
    })
  } catch (e) {}
}
</script>

<style scoped lang="less">
.cell {
  background: #f4f4f6;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .icon {
    width: 48rpx;
    height: 48rpx;
    margin-left: 28rpx;
    // background: #408df2;
  }
  .content {
    margin-left: 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    margin-right: 140rpx;
    width: calc(100% - 242rpx);

    .title {
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      width: calc(100% - 48rpx);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .des {
      color: var(--primary-petrol, #2d3746);
      font-size: 12px;
      font-weight: 400;
      margin-top: 10rpx;
      opacity: 0.800000011920929;
    }
  }
  .right-button {
    position: absolute;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 600;
    font-size: 28rpx;
    color: #408df2;
    height: 100%;
    line-height: v-bind(height);
    right: 48rpx;
  }
}
</style>
